<template>
    <div class="main">
        <PageTitle title="运费列表" ></PageTitle>
        <el-row :gutter="10">
            <el-col :span="12"></el-col>
            <el-col :span="6">
                <el-input :placeholder="'输入订单号搜索'" v-model="search" @keypress.enter.native="handleSearch">
                    <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                </el-input>
            </el-col>
      
        </el-row>
        <el-table
            stripe
            :data="tableData"
        >
            <el-table-column
                prop="id"
                label="id">
            </el-table-column>
            <el-table-column
                prop="order"
                label="订单号"
            >
            </el-table-column>
            <el-table-column
                prop="price"
                label="支付金额"
            >
            </el-table-column>
            <el-table-column
                prop="pay_at"
                label="下单时间"
            >
            </el-table-column>
            <el-table-column
                prop="nikname"
                label="姓名"
            >
            </el-table-column>
            <!-- <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <router-link :to="'/sendOrderList/sendOrderDetail/' + scope.row.order" class="el-button el-button--text">查看</router-link>
                </template>
            </el-table-column> -->
        </el-table>
        <div class='pagination-wrapper'>
            <el-pagination
                layout="prev, pager, next"
                @current-change="pageChange"
                :page-size="pageSize"
                :total="totalCount"
                :current-page="pageNum"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import PageTitle from '@/components/pageTitle/PageTitle.vue'
export default {
    components:{
        PageTitle
    },
    data(){
        return{
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            totalCount: 0,
            search: ''
        }
    },
    created(){

    },
    mounted(){
        
    },
    activated(){
        this._getList()
    },
    methods:{
        async _getList() {
            let { data: { code, data } } = await this.$axios({
                url: this.$api + '/v1/order/pay',
                method: 'GET',
                params: {
                    size: this.pageSize,
                    page: this.pageNum,
                    order: this.search
                }
            })
            if(code === 0) {
                if(data.item) {
                    data.item.forEach((item,index) => {
                        item.nikname = data.namae[index]
                    });
                    console.log('data.items--------',data.item)
                    this.tableData = data.item
                    this.totalCount = parseInt(data.pages.totalCount)
                } else {
                    this.tableData = []
                }
            }
        },
        handleClick(s) {
            this.pageNum = 1
            this.$nextTick(() => {
            this._getList()
            })
        },
        handleSearch() {
            this.pageNum = 1
            this._getList()
        },
        pageChange(pageNum) {
            this.pageNum = pageNum,
            this._getList()
        },
        dateChange(date) {
            this.date = date
            this.pageNum = 1
            this._getList()
        },
        handlePictureCardPreview(src) {
            this.dialogImageUrl = src;
            this.dialogVisible = true;
        }
    }
}
</script>